<template>
  <div>
    <van-row type="flex">
      <van-col span="2"
        ><img
          @click="fun"
          class="img1"
          src=""
          alt=""
      /></van-col>
      <van-col span="18" style="width: 85%">
        <van-search v-model="value" shape="round" background="#fff" @click="jump" />
      </van-col>
    </van-row>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value4" :options="option4" />
    </van-dropdown-menu>
    <div class="school">
      <span>点击筛选</span><img src="https://m.360buyimg.com/umm/jfs/t1/110533/11/30261/1908/63d7673fF937b6366/c21baccf011b0789.png" alt=""><span>活动商品</span>
    </div>
    <!-- 商品 -->
    <div v-for="(v, index) in arr" :key="index" @click="ps(v)">
      <van-card
        num="1"
        :price="v.originprice"
        :desc="v.desc"
        :title="v.proname"
        :thumb="v.img1"
        style="background: #fff; border-bottom: 1px solid #efefef"
      />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";
import { Card } from "vant";

Vue.use(Card);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  data() {
    return {
      value: "",
      value1: 0,
      value2: "z",
      value3: "b",
      value4: "xx",
      arr: [],
      option1: [
        { text: "综合", value: 0 },
        { text: "最新上架", value: 1 },
        { text: "价格最低", value: 2 },
        { text: "价格最高", value: 3 },
        { text: "评价最多", value: 4 },
      ],
      option2: [{ text: "销量", value: "z" }],
      option3: [
        { text: "211限时达", value: "a" },
        { text: "有货优先", value: "b" },
        { text: "货到付款", value: "c" },
        { text: "京东国际", value: "d" },
        { text: "PLUS专享", value: "e" },
        { text: "促销商品", value: "f" },
        { text: "配送全球", value: "g" },
      ],
      option4: [{ text: "筛选", value: "xx" }],
    };
  },
  methods: {
    fun() {
      this.$router.back();
    },
    jump(){
      this.$router.push('/SearchS')
    },
    ps(v){  
            // this.$router.push(`/goods/${v.proid}`)        //点击商品跳到商品详情
            this.$router.push({
                path:'/ProductDetails',
                query:{
                    proid:v.proid
                }
            })
        },
        // 注意：如果滚轮触发此功能会报废！！！
    handleScroll() {
      // 页面滚动距顶部距离
      var scrollTop =window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight      
          //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

        if (scrollTop + windowHeight >= scrollHeight - 5 && this.arr.length <=40) {
          setTimeout(() => {
        this.$http({
          url: "api/pro/list", // 设置请求的地址
          params:{
            count:(this.arr.length / 10 + 1)
          },
          method: "GET", // 设置请求方法
        }).then((res) => {
          // res为后端返回的数据;
          res.data.data.forEach((element) => {
            this.arr.push(element);
            // console.log(this.arr.length)
          });
        });
        }, 500);
        //添加你想要的事件
      }


    },
  },
  mounted() {
    this.$http({
      url: "api/pro/list", // 设置请求的地址
      method: "GET", // 设置请求方法
    }).then((res) => {
      // res为后端返回的数据
      res.data.data.forEach((element) => {
        this.arr.push(element);
      });
    });
      window.addEventListener("scroll", this.handleScroll, true);   
  },
};
</script>

<style scoped>
.van-row {
  width: 100vw;
  background: #fff;
  height: 11.7333vw;
  align-items: center;
  margin-bottom: 0.5333vw;
}
.van-col {
  text-align: center;
}
.img1 {
  width: 5.3333vw;
  height: 4.8vw;
  vertical-align: middle;
}
.van-search {
  width: 100%;
  height: 8vw;
}
.school {
  position: relative;
    font-size: 14px;
    line-height: 2.4em;
    background: #fbeeec;
    border-radius: 4px;
    text-align: center;
        color: #666;
        vertical-align: middle;
}
.school img {
  width: 45px;
  height: 14px;
  margin: 0;
  transform: translateY(1px);
}
</style>